<!-- 高级属性 -->
<template>
    <div>
        <input v-model="editorForm.id" type="hidden" />
        <el-row :gutter="40">
            <el-col :span="12">
                 <el-form-item :label="$t('OSD语言')" prop="osdLanguage" class="advanced-attr" label-width="130px">
                    <el-select v-model="editorForm.osdLanguage" :placeholder="$t('请选择OSD语言')">
                        <el-option v-for="(item, index) in languages" :key="item.value" :label="$t(item.name)" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('OSD密码')" prop="osdPassword" class="advanced-attr" label-width="130px">
                    <el-input v-model="editorForm.osdPassword" autocomplete="off" maxlength="6" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('自动清理文件天数')" prop="fileKeepDays" class="advanced-attr" label-width="130px">
                    <el-input v-model="editorForm.fileKeepDays" autocomplete="off" maxlength="2" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('系统密码')" prop="systemPassword" class="advanced-attr" label-width="130px">
                    <el-input v-model="editorForm.systemPassword" autocomplete="off" maxlength="6" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('下载速度(KB/s)')" prop="downloadSpeed" class="advanced-attr">
                    <el-input v-model="editorForm.downloadSpeed" autocomplete="off" maxlength="4" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('心跳时间(秒)')" prop="heartbeatInterval" class="advanced-attr">
                    <el-input v-model="editorForm.heartbeatInterval" autocomplete="off" maxlength="3" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('日志级别')" prop="logLevel" class="advanced-attr">
                     <el-select v-model="editorForm.logLevel" :placeholder="$t('请选择日志级别')">
                        <el-option v-for="(item, index) in logLevels" :key="item.value" :label="$t(item.name)" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('自动升级')" prop="autoUpgrade" class="advanced-attr">
                    <el-checkbox v-model="editorForm.autoUpgrade">{{ $t('允许') }}</el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="24">
                <el-form-item :label="$t('使用指定终端服务器')" label-width="130px">
                    <el-checkbox v-model="appointHttp" @change="changeAppointHttp"></el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item :label="$t('终端服务地址')" prop="apiServer" v-show="appointHttp">
            <el-input v-model="editorForm.apiServer" autocomplete="off" maxlength="100" clearable style="width:400px"></el-input>
        </el-form-item>
        <el-row>
            <el-col :span="24">
                <el-form-item :label="$t('使用指定资源服务器')" label-width="130px">
                    <el-checkbox v-model="appointFTP" @change="changeAppointFTP"></el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item :label="$t('资源服务地址')" prop="resServer" v-show="appointFTP">
            <el-input v-model="editorForm.resServer" style="width:400px" autocomplete="off" maxlength="100" clearable></el-input>
        </el-form-item>
    </div>
</template>

<script>
import { languageArray, logLevelArray } from "@/const/index"
export default {
    name: "AdvancedAttr",
    data() {
        return {
            appointFTP: false,
            appointHttp: false,
            languages: languageArray,
            logLevels: logLevelArray
        }
    },
    props: {
        editorForm: {
            autoUpgrade: false,
            default: {}
        }
    },
    created() {
        this.$eventBus.$on('closeDialog', this.close);
        this.$eventBus.$on('initBasicData', this.initBasicData);
    },
    beforeDestroy() {
        this.$eventBus.$off('closeDialog');
        this.$eventBus.$off('initBasicData');
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    methods: {
        changeAppointHttp(val) {
          if(!val) {
            let editorForm = {...this.editorForm}
            delete editorForm.apiServer
            this.$emit('update:editorForm',editorForm)
          }
        },
        changeAppointFTP(val) {
          if(!val) {
            let editorForm = {...this.editorForm}
            delete editorForm.resServer
            this.$emit('update:editorForm',editorForm)
          }
        },
        close(){
            this.appointFTP=false
            this.appointHttp=false
        },
        initBasicData(){
            this.$nextTick(() => {
                this.appointFTP= this.editorForm.resServer ? true:false
                this.appointHttp=this.editorForm.apiServer ? true:false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.advanced-attr {
    ::v-deep .el-form-item__content {
        width: 230px;
    }
    ::v-deep .el-select {
        width: 230px;
    }
    ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 230px;
    }
}
::v-deep .el-form-item__label {
  text-align: left;
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  padding:0 !important;
  -moz-padding:0;
}
</style>